<template>
  <div class="recharge">
    <el-form label-width="120px">
      <el-form-item label="转账地址">
        <el-input v-model="sender" placeholder="请输入转账地址" style="width:500px;"/>
      </el-form-item>
      <el-form-item label="转账地址私钥">
        <el-input :rows="5" v-model="privateKey" type="textarea" placeholder="请输入转账地址私钥" style="width:500px;"/>
      </el-form-item>
      <el-form-item label="转账金额">
        <el-input-number v-model="amount" :min="fee+1" controls-position="right"/>
      </el-form-item>
      <el-form-item label="交易费">
        {{ fee }} dlb
      </el-form-item>
      <el-form-item label="实际到账">
        {{ amount ? amount - fee : 0 }}  dlb
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="onSubmit">充值</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { postRecharge } from '@/api/table'
import { getToken } from '@/utils/auth'
export default {
  name: 'Reharge',
  data() {
    return {
      fee: 1,
      balance: 0,
      sender: 'b1dab07ed424171e0d8dfb9fcea5d17deb7d2315',
      privateKey: '307702010104208cb494a9a8dfd1af59743a01c08a86fbaea34e23f6ca85328bec2753c3489c16a00a06082a8648ce3d030107a14403420004134399d7cde624c1e37f34613fd07cad910cd879764434779a12444cf4554a3011634e0be1af4cfc6caaeb5117fdba5fdaf9139b6c50f7bcb35ae20c3f720aab',
      amount: 0
    }
  },
  mounted() {
    this.balance = Number(getToken('balance'))
  },
  methods: {
    onSubmit() {
      if (!this.sender) {
        this.$alert('请填写转账地址', '提示', {
          confirmButtonText: '我知道了',
          center: true
        })
        return false
      }
      if (!this.privateKey) {
        this.$alert('请填写转账地址私钥', '提示', {
          confirmButtonText: '我知道了',
          center: true
        })
        return false
      }
      if (!this.amount) {
        this.$alert('请填写转账金额', '提示', {
          confirmButtonText: '我知道了',
          center: true
        })
        return false
      }
      if (this.amount - this.fee <= 0) {
        this.$alert('实际到账金额不得少于1dlb', '提示', {
          confirmButtonText: '我知道了',
          center: true
        })
      } else {
        this.$confirm('请再次确定您的转账地址及私钥，继续操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.toTrade()
        })
      }
    },
    toTrade() {
      postRecharge({
        type: 1,
        sender: this.sender,
        privateKey: this.privateKey,
        amount: this.amount
      }).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recharge{
  padding: 30px 0;
  span{
    margin-left: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    .icon-copy{
      font-size: 20px;
      color: #409EFF;
      position: absolute;
      top:0;
      left:0;
      z-index:-1;
    }
  }
  .code{
    width: 150px;
    height: 150px;
  }
}
</style>
